<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
			function info(){
				this.data = {
					callName:"",
					callNum:"",
					visitorNum:"",
					time:"",
				};
				this.setFormInfo=function(){
					this.data.callName=document.getElementById("callName").value;
					this.data.callNum=document.getElementById("callNum").value;
					this.data.visitorNum=document.getElementById("visitorNum").value;
					this.data.time=document.getElementById("time").value;
				}
			}
			
			var form1= new info();
			
			function printForm(){
				form1.setFormInfo();
				var infoStr= "联系人："+form1.data.callName+"#"+"联系电话："+form1.data.callNum+"#"+"参观人数："+ form1.data.visitorNum+"#"+"预约时间："+form1.data.time;
				console.log(infoStr);
			}
		</script>
	</head>
	<body>
		<div id="info">
			<header><h3>预约信息</h3></header>
			<article class="add">
				<form action="#" method="get">
					<p>
						<label>联系人：</label>
						<input id="callName" type="text" required="required" />
					</p>
					<p>
						<label>联系电话：</label>
						<input id="callNum" type="text" required="required" />
					</p>
					<p>
						<label>参观人数：</label>
						<input id="visitorNum" type="number" required="required" value="5" />
					</p>
					<p>
						<label>预约时间：</label>
						<input id="time" type="date" required="required" />
					</p>
					<input type="submit" onclick="return printForm()" value="提交" />
					<input type="reset" value="放弃" />
				</form>
			</article>
		</div>
	</body>
</html>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	#info{
		width: 300px;
		margin: 10px auto;
		border: 1px solid #DDDDDD;
		padding-bottom: 20px;
	}
	header{
		background-color: #767676;
		color: white;
		padding: 6px;
	}
	.add p {
		padding: 10px;
	}
	.add label{
		width: 80px;
		display: inline-block;
		margin-left:10px;
	}
	p:after{
		content: "*";
	}
	input{
		width: 160px;
		height: 18px;
	}
	input[type="submit"],input[type="reset"]{
		width: 60px;
		height: 28px;
		margin: 15px 0 0 60px;
	}
</style>